<template>
  <div class="body" v-if="otherFlag == '1'">
    <details-layout :leftTitle="otherData.tableName_cn || otherData.flmc || ''"></details-layout>
    <div class="detail" v-for="(item,index) in otherData.data || otherData" :key="index" v-if="index == currentPage - 1">
      <div class="child" :class="item1.col_val.length > 30?'two-line-border two-line-height':''" v-for="(item1,index1) in item.rowArr" :key="index1">
        <span class="key">{{item1.col_cn}}</span>
        <span class="value" :class="item1.col_val.length > 20?'two-line':''">{{item1.col_val}}</span>
      </div>
    </div>
    <div class="foot">
      <span @click="pre">上一条</span>
      <span class="text">{{currentPage}}/{{otherData.data.length}}</span>
      <span @click="next">下一条</span>
    </div>
  </div>

  <div class="body" v-else-if="otherFlag == '2'">
    <details-layout :leftTitle="title"></details-layout>
    <div class="detail" v-for="(item,index) in otherData" :key="index" v-if="index == currentPage - 1">
      <div class="child" :class="item1.col_val.length > 25?'two-line-border two-line-height':''" v-for="(item1,index1) in item.rowArr" :key="index1">
        <span class="key">{{item1.col_cn}}</span>
        <span class="value" :class="item1.col_val.length > 25?'two-line':''">{{item1.col_val}}</span>
      </div>
    </div>
    <div class="foot">
      <span @click="pres">上一条</span>
      <span class="text">{{currentPage}}/{{otherData.length}}</span>
      <span @click="nexts">下一条</span>
    </div>
  </div>

  <div class="body" v-else-if="otherFlag == '3'">
    <details-layout :leftTitle="title"></details-layout>
    <div class="detail">
      <div class="child" :class="item.value.length > 25?'two-line-border two-line-height':''" v-for="(item,index) in otherData" :key="index">
        <span class="key">{{item.key}}</span>
        <span class="value" :class="item.value.length > 25?'two-line':''">{{item.value}}</span>
      </div>
    </div>
    <div class="foot">
      <span>上一条</span>
      <span class="text">1/1</span>
      <span>下一条</span>
    </div>
  </div>


  <div class="body" v-else-if="otherFlag == '4'">
    <details-layout :leftTitle="title"></details-layout>
    <div class="detail">
      <div class="child" :class="item.col_val.length > 25?'two-line-border two-line-height':''" v-for="(item,index) in otherData" :key="index">
        <span class="key">{{item.col_cn}}</span>
        <span class="value" :class="item.col_val.length > 25?'two-line':''">{{item.col_val}}</span>
      </div>
    </div>
    <div class="foot">
      <span>上一条</span>
      <span class="text">1/1</span>
      <span>下一条</span>
    </div>
  </div>
</template>

<script>
  import detailsLayout from '../../components/details-layout'
  import { mapState } from 'vuex'
  export default {
    name: 'detail',
    components: {
      detailsLayout
    },
    mixins: [],
    computed: {
      ...mapState('personStore', {
        otherData: 'otherData',
        otherFlag: 'otherFlag'
      })
    },
    data() {
      return {
        currentPage: 1,
        data: [],
        title: ''
      }
    },
    methods: {
      pre() {
        this.currentPage <= 1 ? this.currentPage = 1 : this.currentPage--
      },
      next() {
        this.currentPage >= this.otherData.data.length ? this.currentPage = this.otherData.data.length : this.currentPage++
      },
      pres() {
        this.currentPage <= 1 ? this.currentPage = 1 : this.currentPage--
      },
      nexts() {
        this.currentPage >= this.otherData.length ? this.currentPage = this.otherData.length : this.currentPage++
      }
    },
    filters: {
    },
    mounted() {
    },
    created() {
      console.log(this.otherData)
      console.log(this.otherFlag)
      this.currentPage = this.$route.query.page || 1
      this.title = localStorage.getItem('titlename')
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.body {
  background-color: #FFFFFF;
  .detail {
    margin-bottom: 8rem;
    background-color: #FFFFFF;
    .two-line-height {
      height: 13rem;
    }
    .two-line-border {
      border-bottom: 0px;
    }
    .child {
      min-height: 3.5rem;
      line-height: 3.5rem;
      border-bottom: 1px solid #F1F1F1;
      .key {
        float: left;
        margin-left: 1rem;
        color: #676767;
      }
      .value {
        float: right;
        margin-right: 1rem;
        color: #303030;
      }
      .two-line {
        margin-left: 1rem;
      }
    }
  }
  .foot {
    position: fixed;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    width: 100%;
    left: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #4F77AA;
    color: #FFFFFF;
    .text {
      margin:0rem 3rem;
    }
  }
}
</style>
